<template>
	<view class="answer">
		<view class="box1">
			<view class="t1">
				题目{{current+1}} 
				<text v-if="data[current].type==1">（单选题）</text>
				<text v-else-if="data[current].type==2">（多选题）</text>
			</view>
			<view class="">
				{{current+1}}/{{limit}}
			</view>
		</view>
	
				
				 <swiper class="swiper" @change="change" :current="current">
						<swiper-item v-for="(item,index) in data" :key="item._id">	
							<view class="box2">
								<view class="t1">
									{{item.title}}
								</view>
									<c-xz :content="item"  :screen="screen" :index="index"  ></c-xz>
							
							</view>
						</swiper-item>
					
				</swiper> 
				
	
		
		<c-Loading></c-Loading>
		<c-datika v-if="show1" :sub="sub" :content="data"></c-datika>
		<view class="buts">
			<button :class="[current===0?'but but1':'but but2']" @tap="up">{{current===0?'无':'上一题'}}</button>
			<button class="but but2 " @tap="next">下一题</button>
		</view>
		
			<u-modal v-model="show_Alert" :content="message"></u-modal>
	</view>
</template>

<script>
	import xz from './common/xz'
	import datika from './common/datika'
	export default {
		components:{
		
			'c-xz':xz,
			'c-datika':datika,
		},
		data() {
			return {
				current:0,//swiper索引
				limit:10,
				data:[{type:1}],
				count:0,//数据库里面总共多少条数据
				
				arryNumber:[2,3,4,5,6,7,8,9,10,11],//随机出题
				show1:false, //展示答题卡
				show_Alert:false,
				message:'',
			};
		},
		onLoad() {
			let t=this;
			t.$store.commit('setLoadIng',true)
			Promise.all([t.getAnswer()]).then(res=>{
					t.data=res[0];
					
					t.$store.commit('setLoadIng',false)
			})
		},
		onBackPress(e ){
			let t=this;
			if (e.from == 'backbutton') {
					console.log(t.show1)
					if(t.show1){
						t.show1=false;
						return true; //阻止默认返回行为
					}else{
						return false;
					}
					
					
			}
		
			
		},
		methods:{
			sub(){
				let t=this;
				for (let item of t.data) {
					if(!item.myanswer){
						t.message='你还有未答题，确定要提交吗'
						return t.show_Alert=true
					}
				}
			
				
			},
			next(){
				let t=this;
				if(t.current>=(t.limit-1)){
					
					t.show1=true;
				}else{
					++t.current
				}
				
			},
			up(){
				let t=this;
				if(t.current<=0){
					return
				}else{
					--t.current
				}
				
			},
			screen(param1,param2,current){
		
				let t=this;
				
				
					if((current+1)!=t.limit){
						setTimeout((t)=>{
						 t.current=++current;
						 },200,t)
					}
					t.$set(t.data[current],'myanswer',param2)
			
				
				// 
			},
			suiji(){
				let t=this;
				
				
						let number=	Math.round(Math.random()*t.count)
								
						if(t.arryNumber.findIndex(res1=>res1==number)!=-1){
							
							t.suiji()
						}else{
							t.arryNumber.push(number)
							
							if(t.arryNumber.length!=10){
								t.suiji()
								
							}
						}
			
				
			},
			getAnswer(){
				let t = this;
				
				return new Promise(resolve => {
						
						
						t.$db.collection('answerHTML').count().then(res=>{
							t.count=res.result.total
								 let where='';
								for (let s of t.arryNumber) {
									if( t.arryNumber[t.arryNumber.length-1]==s){
										where=where+'index=='+s
									}else{
										where=where+'index=='+s+'||'
									}
									
									
								}
								
									t.$db.collection('answerHTML').where(where).limit(t.limit).get().then(res => {
										resolve(res.result.data)
									})
								
						})
					
				})
			},
			change(e) {
				let t=this;
				t.current=e.detail.current
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.buts{
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		z-index:2;
		.but{
			flex:1;
			border: 0;
			border-radius:0;
			background-color:white;
			
		}
		.but1{
			color: #a3a3a3;
		}
		.but2{
			color: #008af8;
		}
		/deep/ uni-button:after{
			border-radius:0;
		}
	}
	.box1 {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #dfdfdf;
		font-size: 28rpx;

		>.t1 {
			flex: 1;
		}
	}
	.swiper{
		height: 85vh;
	}
	.box2 {
		padding: 20rpx;

		.t1 {
			padding: 20rpx 0rpx 60rpx;
		}

		
	}
</style>
